<template>
<van-popup v-model="showYkbDetailPanel" position="right" :overlay="false" class="ykb-detail-panel">
  <van-nav-bar title="益康币明细" left-arrow @click-left="closeYkbDetailPanel" left-text="返回">
  </van-nav-bar>
  <div class="van-cell-group van-hairline--top-bottom">
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">转赠</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value defray">
        <span>-300</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">收入</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value income">
        <span>+300</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">换购智能洗衣机</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value defray">
        <span>-3000</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">换购智电视机</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value defray">
        <span>-3000</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">换购智能门锁</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value defray">
        <span>-3000</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">换购智能窗帘</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value defray">
        <span>-3000</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">换购智能台灯</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value defray">
        <span>-3000</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">收入</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value income">
        <span>+600</span>
      </div>
    </div>
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">收入</span>
        <span class="van-cell__label">2018-02-26 08:34:35</span>
      </div>
      <div class="van-cell__value income">
        <span>+100</span>
      </div>
    </div>
  </div>
</van-popup>
</template>

<script>
export default {
  props: ['showYkbDetailPanel'],
  methods: {
    closeYkbDetailPanel() {
      this.$emit('closeYkbDetailPanel')
    }
  }
}
</script>

<style lang="scss">
.ykb-detail-panel {
    height: 100%;
    width: 100%;
    background-color: #f2f2f2;
    .van-cell__text{
    font-weight: bolder;
    }
    .defray,.income{
      font-weight: bolder;
    }
    .income{
      color: #16ab21;
    }
}
</style>
